<template>
	<div class="main-container">
		<el-card :body-style="{ padding: '10px' }" shadow="hover">
			<template #header>
				<div class="flex justify-between">
					<span class="text-bold text-sm">工作台</span>
				</div>
			</template>
			<div class="flex margin-top">
				<div class="avatar-wrapper">
					<img :src="avatar" />
				</div>
				<div class="flex-sub flex flex-direction justify-around margin-left">
					<div class="text-xl">早上好，Andy，青春只有一次	，别让自己过得不精彩</div>
					<div class="text-grey text-sm">
						<el-button @click="handlerCeshi">测试</el-button>
						<i class="el-icon-heavy-rain"></i>
						今日有小雨，出门别忘记带伞哦~
					</div>
				</div>
				<div class="flex flex-direction justify-around align-end item-action">
					<div class="text-gray">项目数</div>
					<div class="text-xl">12</div>
				</div>
				<div class="flex flex-direction justify-around align-end item-action">
					<div class="text-gray">待办项</div>
					<div class="text-xl">3/20</div>
				</div>
				<div class="flex flex-direction justify-around align-end item-action">
					<div class="text-gray">当前日期</div>
					<div class="text-xl">{{ currentDate }}</div>
				</div>
			</div>
		</el-card>
		<div class="flex margin-top-xs">
			<el-card style="width: 100%" :body-style="{ padding: 0 }">
				<template #header>
					<div class="flex justify-between">
						<span class="text-bold text-sm">快捷操作</span>
					</div>
				</template>
				<el-row>
					<el-col v-for="(item, index) of fastActions" :key="index" :span="4">
						<div @click="fastActionClick(item)" class="fast-item-wrapper flex flex-direction justify-center align-center">
							<div :class="[item.icon, 'iconfont']" :style="{ color: item.color, 'font-size': '26px' }"></div>
							<div class="margin-top-xs">{{ item.title }}</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<div class="flex margin-top-xs">
			<el-card style="width: 100%" :body-style="{ padding: 0 }">
				<template #header>
					<div class="flex justify-between">
						<span class="text-bold text-sm">Admin Work 各版本说明</span>
					</div>
				</template>
				<el-table :data="dataList" size="large" :stripe="true" :border="false">
					<el-table-column label="项目名称" prop="projectName"></el-table-column>
					<el-table-column label="版本说明">
						<template v-slot="scope">
							<el-tag :type="!scope.row.isEmpower ? 'success' : 'danger'">{{ scope.row.isEmpower ? '授权付费' : '免费开源' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template v-slot="scope">
							<el-tag :type="scope.row.status === '持续更新' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="标签" min-width="200">
						<template v-slot="scope">
							<el-space>
								<el-tag v-for="tag of scope.row.tags" :key="tag">{{ tag }}</el-tag>
							</el-space>
						</template>
					</el-table-column>
					<el-table-column label="操作" min-width="100">
						<template v-slot="scope">
							<el-space>
								<el-button type="primary" size="small" @click="onPreview(scope.row)">预览</el-button>
								<el-popover placement="left" :title="scope.row.isEmpower ? '添加微信好友详细咨询' : '关注公众号，获取源码'" :width="200" trigger="hover">
									<template #reference>
										<el-button type="danger" size="small">获取源码</el-button>
									</template>
									<el-image
										:src="scope.row.isEmpower ? 'http://arco.vueadminwork.com/assets/custom_weixin.0dc9ea7d.jpg' : 'http://arco.vueadminwork.com/assets/qrcode.0a69adee.jpg'"
									/>
								</el-popover>
							</el-space>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { random } from 'lodash'
// import { userInfo } from '@/api/url'
import {  post } from '@/api/http'

import useUserStore from '@/store/modules/user'
import Form from '@/hooks/Form'
const COLORS = ['#67C23A', '#E6A23C', '#F56C6C', '#409EFF']
const date = new Date()
export default defineComponent({
	name: 'WorkPlace',
	setup() {
		const userStore = useUserStore()
		const router = useRouter()
		const fastActionClick = ({ path = '/' }) => {
			router.push(path)
		}
		function onPreview(item: { target: string | URL | undefined }) {
			window.open(item.target)
		}
		const dataList = [
			{
				key: '1',
				projectName: 'Admin Work Pro',
				tags: ['vue3', 'vite', 'naive-ui', 'typescript'],
				isEmpower: true,
				status: '持续更新',
				target: 'http://p.vueadminwork.com'
			},
			{
				key: '2',
				projectName: 'Arco Work',
				tags: ['vue3', 'vite', 'arco-design', 'typescript'],
				isEmpower: false,
				status: '持续更新',
				target: 'http://arco.vueadminwork.com'
			},
			{
				key: '3',
				projectName: 'Admin Work',
				tags: ['vue3', 'vite', 'naive-ui', 'typescript'],
				isEmpower: false,
				status: '持续更新',
				target: 'http://aw.vueadminwork.com'
			},
			{
				key: '5',
				projectName: 'Admin Work A',
				tags: ['vue3', 'vite', 'ant-design', 'typescript'],
				isEmpower: false,
				status: '持续更新',
				target: 'http://a.vueadminwork.com'			
			},
			{
				key: '6',
				projectName: 'Admin Work Basic',
				tags: ['vue2', 'webpack', 'element-ui', 'javascript'],
				isEmpower: false,
				status: '停止维护',
				target: 'http://qingqingxuan.gitee.io/arco-work'
			}
		]

		// async function handlerCeshi(){
		// 	const result = await post({
		// 		url:userInfo,
		// 		data:{}
		// 	})
		// 	console.log(result , 'result')

		// }
		return {
			// handlerCeshi,
			dataList,
			avatar: userStore.avatar,
			currentDate: date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(),
			fastActions: [
				{
					title: '首页',
					icon: 'icon-dashboard-fill',
					path: '/',
					color: COLORS[random(0, COLORS.length)]
				},
				{
					title: '系统管理',
					path: '/system/department',
					icon: 'icon-setting-fill',
					color: COLORS[random(0, COLORS.length)]
				},
				{
					title: '列表',
					path: '/list/table-custom',
					icon: 'icon-detail-fill',
					color: COLORS[random(0, COLORS.length)]
				},
				{
					title: '表单',
					path: '/form/base-form-view',
					icon: 'icon-file-text-fill',
					color: COLORS[random(0, COLORS.length)]
				},
				{
					title: '多级菜单',
					path: '/next/menu2/menu-2-1/menu-2-1-1',
					icon: 'icon-golden-fill',
					color: COLORS[random(0, COLORS.length)]
				},
				{
					title: '更多功能',
					path: '/other/qrcode',
					icon: 'icon-appstore-fill',
					color: COLORS[random(0, COLORS.length)]
				}
			],
			fastActionClick,
			onPreview
		}
	}
})
</script>

<style lang="scss" scoped>
.avatar-wrapper {
	width: 5rem;
	height: 5rem;
	& > img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid yellowgreen;
	}
}
.item-action {
	position: relative;
	padding: 0 30px;
}
.item-action::after {
	position: absolute;
	top: 20%;
	right: 0;
	height: 60%;
	content: '';
	display: block;
	width: 1px;
	background-color: #e0e0e0;
}
div.item-action:last-child::after {
	width: 0;
}
.fast-item-wrapper {
	border-right: 1px solid var(--el-card-border-color);
	border-bottom: 1px solid var(--el-card-border-color);
	height: 80px;
}
.fast-item-wrapper:hover {
	cursor: pointer;
	box-shadow: 0px 0px 10px #ddd;
}
.el-link + .el-link {
	margin-bottom: 10px;
}
</style>
